<template>
  <div class="app-container">
    <el-row :gutter="20" class="question-edit-contain">
      <el-col :span="16">
        <el-card header="题目编辑区域：">
          <el-form
            :model="form"
            ref="form"
            label-width="100px"
            v-loading="formLoading"
            :rules="rules"
          >
            <el-form-item label="所属人员类型：" v-if="moduleType === 3">
              <el-select
                class="filter-item"
                v-model="form.personnelType"
                :clearable="true"
                placeholder=""
                filterable
              >
                <el-option
                  v-for="item in personnelTypeList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
            <!--            <el-form-item label="所属模块">-->
            <!--              <el-select-->
            <!--                class="filter-item"-->
            <!--                v-model="form.moduleType"-->
            <!--                :clearable="true"-->
            <!--                placeholder=""-->
            <!--                filterable-->
            <!--                disabled-->
            <!--              >-->
            <!--                <el-option-->
            <!--                  v-for="item in moduleTypeList"-->
            <!--                  :key="item.id"-->
            <!--                  :value="item.id"-->
            <!--                  :label="item.name"-->
            <!--                />-->
            <!--              </el-select>-->
            <!--            </el-form-item>-->
            <el-form-item label="场景类型" v-if="moduleType === 2">
              <el-select
                class="filter-item"
                v-model="form.sceneType"
                :clearable="true"
                placeholder=""
                filterable
              >
                <el-option
                  v-for="item in sceneTypeList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="题目类型">
              <el-select
                class="filter-item"
                v-model="form.subjectType"
                :clearable="true"
                placeholder=""
                filterable
              >
                <el-option
                  v-for="item in subjectTypeList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="题目级别" v-if="moduleType === 2">
              <el-select
                class="filter-item"
                v-model="form.subjectLevel"
                :clearable="true"
                placeholder=""
                filterable
              >
                <el-option
                  v-for="item in subjectLevelList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="题干：" prop="subjectTitle" required>
              <el-input v-model="form.subjectTitle"> </el-input>
            </el-form-item>
            <el-form-item
              label="选项："
              prop="options"
              class="editor-form-item"
              v-if="moduleType !== 5 && form.subjectType != 6"
            >
              <el-form-item
                :label="item.optionTitle"
                :key="index"
                v-for="(item, index) in form.options"
                label-width="50px"
                class="question-item-label"
              >
                <div class="question-list-item">
                  <el-input v-model="item.optionTitle" class="item-prefix" />
                  <el-input v-model="item.optionContent" class="question-item-content-input">
                  </el-input>
                  <el-button type="danger" @click="questionItemRemove(index)" class="icon-button">
                    <i class="el-icon-delete" />
                  </el-button>
                </div>
              </el-form-item>
            </el-form-item>
            <el-form-item
              label="标答："
              prop="answer"
              v-if="moduleType !== 5 && form.subjectType !== '6'"
            >
              <el-radio-group v-model="form.answer" v-show="form.subjectType != 2">
                <el-radio
                  v-for="item in form.options"
                  :key="item.optionTitle"
                  :label="item.optionTitle"
                >
                  {{ item.optionTitle }}
                </el-radio>
              </el-radio-group>
              <el-checkbox-group v-model="form.correctArray" v-show="form.subjectType === 2">
                <el-checkbox
                  v-for="item in form.options"
                  :label="item.optionTitle"
                  :key="item.optionTitle"
                >
                  {{ item.optionTitle }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item
              label="填空题答案："
              prop="textAnswer"
              v-if="moduleType !== 5 && form.subjectType === '6'"
            >
              <el-input v-model="form.textAnswer"> </el-input>
            </el-form-item>
            <el-form-item label="题干解析：" prop="titleAnalysis" v-if="moduleType !== 5">
              <el-input v-model="form.titleAnalysis"> </el-input>
            </el-form-item>
            <el-form-item label="答案解析：" prop="answerAnalysis" v-if="moduleType !== 5">
              <el-input v-model="form.answerAnalysis"> </el-input>
            </el-form-item>
            <el-form-item label="分数：" prop="subjectScore">
              <el-input-number
                v-model="form.subjectScore"
                :step="1"
                :max="100"
                :min="0"
              ></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
              <el-button type="success" @click="questionItemAdd" v-if="moduleType !== 5"
                >添加选项</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="8">
        <SubjectShow :subject="form" :showResult="showResult" v-if="moduleType !== 5"></SubjectShow>
        <!-- <el-card header="题目预览：" class="question-preview">
            <div>题干: {{form.subjectTitle}}</div>
            <el-radio-group v-model="form.answer" v-show="form.subjectType != 2" >
              <el-radio v-for="item in form.options" :key="item.optionTitle" :label="item.optionTitle">
                {{item.optionTitle}} {{item.optionContent}}
              </el-radio>
            </el-radio-group>
            <el-checkbox-group v-model="form.correctArray" v-show="form.subjectType == 2">
              <el-checkbox v-for="item in form.options" :label="item.optionTitle" :key="item.optionTitle">
                {{item.optionTitle}} {{item.optionContent}}
              </el-checkbox>
            </el-checkbox-group>
            <div>标准答案: {{form.answer}}</div>
            <div>题干解析:</div>
            <div>{{form.titleAnalysis}}</div>
            <div>答案解析:</div>
            <div>{{form.answerAnalysis}}</div>
          </el-card>-->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { DictionaryController, BizSubjectController } from '@/api';
import SubjectShow from '../components/SubjectShow/index.vue';
export default {
  name: 'formEditBizSubject',
  props: {
    rowData: Object,
    moduleType: Number,
    subjectType: Number
  },
  components: {
    SubjectShow
  },
  data() {
    return {
      showResult: true,
      form: {
        subjectId: null,
        personnelType: '',
        moduleType: this.moduleType,
        subjectType: '',
        sceneType: '',
        subjectTitle: '',
        options: [
          { optionTitle: 'A', optionContent: '' },
          { optionTitle: 'B', optionContent: '' },
          { optionTitle: 'C', optionContent: '' },
          { optionTitle: 'D', optionContent: '' }
        ],
        textAnswer: '',
        answerAnalysis: '',
        titleAnalysis: '',
        subjectScore: 0,
        answer: null,
        correctArray: []
      },
      questionArchiveTree: [],
      personnelTypeList: [],
      moduleTypeList: [],
      subjectTypeList: [],
      subjectLevelList: [],
      sceneTypeList: [],
      formLoading: false,
      rules: {
        subjectTitle: [{ required: true, message: '请输入题干' }]
      }
    };
  },
  created() {
    this.loadPersonnelTypeDropdownList();
    this.loadModuleTypeDropdownList();
    this.loadSubjectTypeDropdownList();
    this.loadSceneTypeDropdownList();
    this.loadSubjectLevelDropdownList();
  },
  methods: {
    questionItemRemove(index) {
      this.form.options.splice(index, 1);
      this.form.answer = null;
      this.form.correctArray = [];
    },
    questionItemAdd() {
      let items = this.form.options;
      if (items.length === 6) {
        return;
      }
      let newLastPrefix = 'A';
      if (items.length > 0) {
        let last = items[items.length - 1].optionTitle;
        if (last.match(/\d{1,2}/g) !== null) {
          newLastPrefix = (parseInt(last) + 1).toString();
        } else {
          newLastPrefix = String.fromCharCode(last.charCodeAt() + 1);
        }
      }
      items.push({ optionTitle: newLastPrefix, optionContent: '' });
    },
    onCancel(isSuccess = false) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess);
      }
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.formLoading = true;
          BizSubjectController.edit(this, this.form)
            .then(re => {
              if (re.errorCode === 'NO-ERROR') {
                this.$message.success('操作成功');
                this.onCancel(true);
                this.$router.replace({ name: 'formsBizSubject' });
              } else {
                this.$message.error(re.message);
              }
            })
            .finally(() => {
              this.formLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.form = {
        subjectId: null,
        personnelType: '',
        moduleType: '',
        subjectType: '',
        sceneType: '',
        subjectTitle: '',
        options: [
          { optionTitle: 'A', optionContent: '' },
          { optionTitle: 'B', optionContent: '' },
          { optionTitle: 'C', optionContent: '' },
          { optionTitle: 'D', optionContent: '' }
        ],
        answerAnalysis: '',
        titleAnalysis: '',
        subjectScore: 0,
        correctArray: [],
        answer: null
      };
      this.$refs['form'].resetFields();
    },
    loadPersonnelTypeDropdownList() {
      return new Promise((resolve, reject) => {
        let params = {
          dictCode: 'PersonnelType'
        };
        DictionaryController.dictGlobalDict(this, params)
          .then(res => {
            this.personnelTypeList = res.getList();
            if (this.moduleType === 3) {
              this.personnelTypeList = this.personnelTypeList.filter(item => item.id > 1);
            }
          })
          .catch(e => {
            reject(e);
          });
      });
    },
    loadModuleTypeDropdownList() {
      return new Promise((resolve, reject) => {
        let params = {
          dictCode: 'ModuleType'
        };
        DictionaryController.dictGlobalDict(this, params)
          .then(res => {
            this.moduleTypeList = res.getList();
          })
          .catch(e => {
            reject(e);
          });
      });
    },
    loadSubjectTypeDropdownList() {
      return new Promise((resolve, reject) => {
        let params = {
          dictCode: 'SubjectType'
        };
        DictionaryController.dictGlobalDict(this, params)
          .then(res => {
            this.subjectTypeList = res.getList();
            if (this.moduleType === 5) {
              this.subjectTypeList = this.subjectTypeList.filter(item => {
                return item.id > 3 && item.id !== '6';
              });
            } else {
              this.subjectTypeList = this.subjectTypeList.filter(item => {
                return item.id < 4 || item.id === '6';
              });
            }
          })
          .catch(e => {
            reject(e);
          });
      });
    },
    loadSubjectLevelDropdownList() {
      return new Promise((resolve, reject) => {
        let params = {
          dictCode: 'SubjectLevel'
        };
        DictionaryController.dictGlobalDict(this, params)
          .then(res => {
            this.subjectLevelList = res.getList();
            this.subjectLevelList = this.subjectLevelList.filter(item => item.id > 0);
          })
          .catch(e => {
            reject(e);
          });
      });
    },
    loadSceneTypeDropdownList() {
      return new Promise((resolve, reject) => {
        let params = {
          dictCode: 'SceneType'
        };
        DictionaryController.dictGlobalDict(this, params)
          .then(res => {
            this.sceneTypeList = res.getList();
          })
          .catch(e => {
            reject(e);
          });
      });
    }
  },
  mounted() {
    if (this.rowData != null) {
      this.form.subjectId = this.rowData.subjectId;
      this.form.subjectTitle = this.rowData.subjectTitle;
      this.form.personnelType = this.rowData.personnelType + '';
      this.form.subjectLevel = this.rowData.subjectLevel + '';
      this.form.moduleType = this.rowData.moduleType + '';
      if (this.rowData.sceneType) {
        this.form.sceneType = this.rowData.sceneType + '';
      } else {
        this.form.sceneType = null;
      }

      this.form.options = this.rowData.options;
      this.form.textAnswer = this.rowData.textAnswer;
      this.form.answerAnalysis = this.rowData.answerAnalysis;
      this.form.titleAnalysis = this.rowData.titleAnalysis;
      this.form.subjectScore = this.rowData.subjectScore;
      this.form.answer = this.rowData.answer;
      this.form.subjectType = this.rowData.subjectType + '';
      if (this.rowData.subjectType === 2) {
        this.form.correctArray = this.form.answer.split('/');
      }
    }
  }
};
</script>
<style scoped>
.question-edit-contain {
  display: flex;
  flex-direction: row;
}

.question-edit-contain .left {
  flex: 1;
}

.question-edit-contain .right {
  width: 350px;
}

.question-list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.question-list-item .item-prefix {
  width: 50px;
}

.question-list-item .question-item-content-input {
  flex: 1;
}

.question-list-item .el-button {
  height: 28px;
  margin-left: 10px;
}

.question-list-item .el-input-number {
  width: 160px;
  margin-left: 10px;
}

[class^='el-card__header'],
[class*=' el-card__header'],
[class^='el-card__header '],
[class*=' el-card__header '] {
  height: 40px !important;
  display: flex;
  align-items: center;
  font-size: 15px;
  padding-left: 10px;
  line-height: 40px;
  justify-content: left;
}

.wdd-question-edit-icon {
  font-size: 20px;
  cursor: pointer;
}

.icon-button {
  display: grid;
  place-items: center;
}
</style>
